<template>
  <a-modal
    :title="title"
    :width="850"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="取消"
    okText="关闭"
    wrapClassName="ant-modal-cust-warp">

    <div class="box">
      <div style="padding-left: 20px;padding-right: 20px;">
        <div style="width: 100%;margin-top: 0px">
          <p style="float: left;margin-top: 5px"><span style="color: red">*</span> 消息标题：</p>
          <a-input style="float: left;width: 300px" placeholder="请输入消息标题" v-model="msg_title" disabled="disabled"></a-input>
        </div>

        <div style="width: 100%;overflow: hidden">
          <p style="float: left;margin-top: 20px"><span style="color: red">*</span> 消息类型：</p>
          <a-select v-model="msg_type" placeholder="请选择消息类型" style="width: 300px;margin-top: 16px" disabled="disabled">
            <a-select-option value="0">系统通知</a-select-option>
            <a-select-option value="1">消息</a-select-option>
            <a-select-option value="2">邮件</a-select-option>
          </a-select>
        </div>

        <div style="width: 100%;overflow: hidden">
          <p style="float: left;margin-top: 20px"><span style="color: red">*</span> 指定用户：</p>
          <a-select v-model="msg_specified" placeholder="请选择是否指定用户" style="width: 300px;margin-top: 16px" @change="qiehuan" disabled="disabled">
            <a-select-option value="0">全体控制台账户</a-select-option>
            <a-select-option value="1">指定用户</a-select-option>
          </a-select>
        </div>

        <div style="width: 100%;overflow: hidden" v-show="this.is_all==1">
          <p style="float: left;margin-top: 20px;margin-left: 8px"><span style="color: red"></span> 用户类型：</p>
          <a-select v-model="msg_userType" placeholder="请选择用户类型" style="width: 300px;margin-top: 16px" disabled="disabled">
            <a-select-option value="1">全体供应商</a-select-option>
            <a-select-option value="2">全体客户</a-select-option>
          </a-select>
        </div>

        <!--                <div style="width: 100%;overflow: hidden" v-show="this.msg_specified==1">-->
        <!--                  <p style="float: left;margin-top: 20px;margin-left: 8px"><span style="color: red"></span> 接收对象：</p>-->
        <!--                  <a-input style="float: left;width: 300px;margin-top: 16px" placeholder="请输入接收对象账号或电话号码" v-model="msg_account"></a-input>-->
        <!--                </div>-->

        <div style="width: 100%;overflow: hidden">
          <p style="float: left;margin-top: 20px;margin-left: 8px"><span style="color: red">*</span> 消息内容：</p>
          <a-textarea placeholder="请输入消息内容" v-model="content" rows="8" style="float: left;" disabled="disabled"/>
        </div>

<!--        <div style="width: 100%;overflow: hidden;margin-top: 20px">-->
<!--          <a-button type="primary" @click="add_message" style="color: #F9D532;width: 80px;height: 36px;background: #333333;border-style: none;">保存</a-button>-->
<!--          <a-button type="primary" @click="fabu_message" style="margin-left: 8px;width: 80px;height: 36px;background: #333333;border-style: none;color: #323232" v-show="this.$route.query.is_add=='0'">发布</a-button>-->
<!--          <a-button @click="reset_message" style="margin-left: 8px;width: 80px;height: 36px;background: #eae7e7;border-style: none;color: #323232">重置</a-button>-->
<!--        </div>-->

      </div>
    </div>
  </a-modal>
</template>

<script>
  import { httpAction, postAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"

  export default {
    name: "JeecgDemoModal",
    components: {
    },
    data () {
      return {
        msg_title:'',//消息标题
        msg_type:'请选择消息类型',//消息类型
        msg_specified:'请选择是否指定用户',//消息类型
        msg_userType:'请选择用户类型',//用户类型
        msg_account:'',//用户账号
        content:'',//消息内容
        is_all:'0',
        dataDetail:[],//数据对象
        title:"操作",
        visible: false,
        model: {},
        validatorRules:{
          roleName:{
            rules: [
              { required: true, message: '请输入角色名称!' },
              { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
            ]},
          roleCode:{
            rules: [
              { required: true, message: '请输入角色名称!'},
              { min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' },
              { validator: this.validateRoleCode}
            ]},
          description:{
            rules: [
              { min: 0, max: 126, message: '长度不超过 126 个字符', trigger: 'blur' }
            ]}
        },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        statuslist: [
          {
            id: '1',
            name: '允许'
          },
          {
            id: '2',
            name: '禁止'
          }
        ],
        confirmLoading: false,
        form: this.$form.createForm(this),
        url: {
          detail: '/sys/annountCement/query_msgDetailByid', // 消息详情
          add: "/admin/parameter/add_bodysize",
          edit: "/admin/parameter/update_bodysize"
        },
      }
    },
    computed: {

    },
    created () {

    },
    methods: {
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;//开启弹框
        if(record=="0"){
          this.title="消息详情"
        }else {
          this.title="消息详情"
          this.show_meassage(this.model.id);
        }
      },
      show_meassage(id){
        let params = {msg_id:id};
        getAction(this.url.detail,params).then((res)=>{
          if(res.success){
            this.msg_title=res.result.title;
            if(res.result.type=='0'){
              this.msg_type='系统通知'
            }else if(res.result.type=='1'){
              this.msg_type='消息'
            }else if(res.result.type=='2'){
              this.msg_type='邮件'
            }
            if(res.result.isSpecified=='0'){
              this.msg_specified='全体控制台账户'
            }else if(res.result.isSpecified=='1'){
              this.msg_specified='指定用户'
            }
            if(res.result.userType=='1'){
              this.msg_userType='全体供应商'
            }else if(res.result.userType=='2'){
              this.msg_userType='全体客户'
            }
            this.is_all = res.result.isSpecified;
            this.content=res.result.message
          }else {
            this.$message.error(res.message);
          }
        });
      },
      close () {
        this.$emit('close');
        this.visible = false;
      },
      handleOk () {
        const that = this;
        that.close();
      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>

<style scoped>

</style>